<template>
	<view style=" background-color: aliceblue; border-radius: 10rpx;">
		<view class="titlebox">
			<view class="imgbox">
				<image :src="showImage" v-if="mode==2" @error="handleImageException()"></image>
			</view>
			<view>
				<text v-if="mode==3" style="color: #aaa;">{{title}}</text>
				<text v-else>{{title}}</text>
			</view>
		</view>
		<view class="adbox" v-if="mode==3" style="margin-top: 5rpx;">
			<view v-for="(item,index) in images">
				<image :src="item" mode="aspectFill" @error="handleImageError(index)"></image>
			</view>
		</view>
		<slot name="tips" v-if="showSearch"></slot>
		<view class="tipsbox">
			<text style="color: #f00;" v-if="isTop">置顶</text>
			<text style="color: #00f;" v-if="mode==3">广告</text>
			<text>{{author}}</text>
			<!-- <text :style="authorColor">{{author}}</text> -->
			<text v-if="mode!=3">{{comments}}评</text>
			<view style="flex:1; display: flex; justify-content: flex-end;">
				<text>{{time}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "NewsCardView",
		data() {
			return {
				defaultPic: "/static/News_image/default-image.png",
				failPic: "/static/News_image/fail-image.png",
				status: 'news',
				imageError:false
			};
		},
		computed: {
			showImage() {
				if(this.images[0]){
					if(this.imageError){
						console.log("showImage Error--> " +this.title);
					}
					return this.imageError? this.failPic:this.images[0]
				}else{
					console.log("showImage Default--> " +this.title);
					return this.defaultPic
				}
			},
			authorColor() {
				const colorMap = {
					news: '#aaa',
					ad: '#00f'
				}
				return {
					color: colorMap[this.status] || '#f33'
				}
			}
		},
		mounted() {
			// console.log("NewsCardView--------mounted " + this.title);
			if (this.mode == 3) {
				this.status = "ad"
			}
		},
		methods: {
			handleImageException() {
				// // 当图片加载失败时，将显示地址改为默认图片
				console.log("handleImageException "+this.title);
				this.imageError = true;
			},
			handleImageError(index) {
				// // 当图片加载失败时，将显示地址改为默认图片
				console.log("handleImageError----->:"+this.title);
				console.log("handleImageError----->index:"+index);
				
				// 将对应索引的显示地址改为默认图片
				//使用this.$set来确保"数组"的变动能被响应式系统检测到
				this.$set(this.images, index, this.failPic);
			}
		},
		props: {
			// 属性是数组的定义方式
			// list:{
			// 	type: Array,
			// 	default: () => []  // 默认值是一个空数组
			// },
			nid: {
				type: String,
				default: "000",
				require: true
			},
			title: {
				type: String,
				default: "新闻标题",
				require: true
			},
			mode: {
				type: Number,
				default: 1,
				require: true
			},
			isTop: {
				type: Boolean,
				default: false,
				require: true
			},
			author: {
				type: String,
				default: "来源",
				require: true
			},
			comments: {
				type: Number,
				default: 0,
				require: true
			},
			time: {
				type: String,
				default: "2025.1.1"
			},
			images: {
				type: Array,
				default: () => []
			},
			showSearch:{
				type:Boolean,
				default:false
			},
			bgColor:{
				type:String,
				default:'#fff'
			}
		}
	}
</script>

<style>
	.adbox {
		display: flex;
		flex-direction: row;
		justify-content: space-around
	}

	.titlebox {
		display: flex;
		flex-direction: row;
		padding-left: 10px;
	}

	.imgbox {
		margin-right: 10px;
	}

	image {
		width: 100px;
		height: 70px;
		border-radius: 10rpx;
	}

	.cardstyle {
		display: flex;
		flex-direction: column;
		text-align: left;
		background-color: #fff;
		border-radius: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.tipsbox {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
		padding-left: 10px;
		margin-top: 15px;
	}

	.tipsbox text {
		margin-right: 10px;
		color: #aaa;
		font-size: 11px;
	}
</style>